<template>
  <q-form ref="form" class="q-gutter-md">
    <h4>欢迎使用 ChineseSubFinder！</h4>
    <div>
      ChineseSubFinder 可以自动化中文字幕下载。 字幕网站支持 shooter、xunlei、arrst、a4k、SubtitleBest 。支持
      Emby、Jellyfin、Plex、Sonarr、Radarr、TMM
    </div>
    <br />
    <strong>为使您顺利使用，请先阅读以下文档</strong>
    <div>
      <!-- eslint-disable -->
      <!-- eslint-disable-next-line -->
      <a
        href="https://github.com/ChineseSubFinder/ChineseSubFinder/blob/docs/DesignFile/%E7%94%B5%E5%BD%B1%E5%92%8C%E8%BF%9E%E7%BB%AD%E5%89%A7%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E7%A4%BA%E4%BE%8B.md"
        target="_blank"
        rel="noopener noreferrer"
        >电影的推荐目录结构</a
      >
      <br />
      <!-- eslint-disable-next-line -->
      <a
        href="https://github.com/ChineseSubFinder/ChineseSubFinder/blob/docs/DesignFile/%E8%BF%9E%E7%BB%AD%E5%89%A7%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E8%A6%81%E6%B1%82.md"
        target="_blank"
        rel="noopener noreferrer"
        >连续剧目录结构要求</a
      >
      <br />
      <!-- eslint-disable-next-line -->
      <a
        href="https://github.com/ChineseSubFinder/ChineseSubFinder/tree/docs/DesignFile/%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B"
        target="_blank"
        rel="noopener noreferrer"
        >使用教程</a
      >
    </div>
    <br />
    <strong> <font color="red"> 后面所有的 `/media` 都对应您网盘中的 `media` 目录。 </font></strong>
    <div style="display: none">
      <q-input
        filled
        v-model="setupState.form.username"
        label="输入您的用户名"
        hint="用户名必须在3-16个字符以内，只能包含字母、数字、下划线"
        lazy-rules
        :rules="[
          (val) => (val && val.length > 0) || '请输入用户名',
          (val) => /^[_a-zA-Z0-9]{3,16}$/.test(val) || '用户名必须在3-16个字符以内，只能包含字母、数字、下划线',
        ]"
      />

      <q-input
        filled
        v-model="setupState.form.password"
        type="password"
        label="输入您的密码"
        hint="密码必须在6-30位之间"
        lazy-rules
        :rules="[
          (val) => (val && val.length > 0) || '请输入密码',
          (val) =>
            /^([a-z]|[A-Z]|[\d~@#$%\*-\+=:,\\?\[\]\{}]){6,30}$/.test(val) ||
            '密码必须在6-30位之间，且只能由字母、数字、特殊符号组成',
        ]"
      />

      <q-input
        filled
        v-model="setupState.form.confirmPassword"
        type="password"
        label="确认密码"
        hint=""
        lazy-rules
        :rules="[(val) => val === setupState.form.password || '两次输入的密码不一致']"
      />
    </div>
  </q-form>
</template>

<script setup>
import { setupState } from 'pages/setup/use-setup';
</script>
